<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="畜牧平台" />
    <meta name="description" content="畜牧平台" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>数据可视化</title>
    <link rel="stylesheet" href="/asset/css/common/reset.css">
    <style>
        body{
            width:100%;
            height:100%;
            background:url(/asset/image/container.png) no-repeat !important;
            background-size: 100%;
        }
        .container{
           width:98%;
           height:100%;
           background:url(/asset/image/biaoti.png) no-repeat;
           background-size:100% 100%;
           padding:2.083333rem 0 0 .677083rem;
           box-sizing: border-box;
           margin:0 auto;
           display: flex;
           justify-content:space-between;
        }
        .container .left{
            width:24.895833rem;
            height:100%;
        }
        .supply_title{
            font-size:1.041667rem;
            color:#3CCEFF;
            width:12.1875rem;
            border-bottom:1px solid #3CCEFF;
        }
        .echart_content{
            /* width:24.895833rem;
            height:17.34375rem; */
            width:100%;
            height:100%;
        }
        .echart_box{
            width:24.895833rem;
            height:17.34375rem;
            padding:0 1.041667rem;
            box-sizing: border-box;
            background:url(/asset/image/left_top.png) no-repeat;
        }
        .middle{
            width:45.833333rem;
            margin-top:2.34375rem;
        }
        .trade_m img{
            width:6.041667rem;
            height:5.260417rem;
        }
        .trade_num,.register_num{
            font-weight:bold;
            color:#3CCEFF;
            font-size:2.5rem;
            margin-top:1.875rem;
        }
        .middle_list li{
            width:50%;
            float: left;
            text-align:center;
        }
        .trade_title,.register_title{
            font-size: 1.25rem;
            color:#F0F0F0;
            margin-top:1.614583rem;
        }
        .map{
            width:45.833333rem;
            height:34.114583rem;
        }
        .index{
            font-size:1.041667rem;
        }
        .read_list li{
            width:19.21875rem;
            margin:0 auto;
            display:flex;
            justify-content: space-between;
            align-items: flex-end;
            padding:0 5px 0 18px;
            margin-bottom:1.145833rem;
            border-bottom:1px solid #fFFFFF;
        }
        .read_list li:first-child{
            border-bottom:none;
        }
        .read_title{
            font-size:.833333rem;
            color:#FEFEFE;
        }
        .reading{
            font-size:16px;
            color:#FFF100;
        }
        .article_title{
            font-size:12px;
            color:#FEFEFE;
        }
        .reading_num{
            font-size:12px;
            color:#FFF100;
        }
        .index1{
            color:#7E072C;
        }
        .index2{
            color:#990853;
        }
        .index3{
            color:#E11117;
        }
        .index4{
            color:#ED871F;
        }
        .index5{
            color:#F9F830;
        }
        canvas{
            top:-30px !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <div class="supply echart_box">
                <div class="supply_title"> 供应产品发布量</div>
                <div id="supply_msg" class="echart_content"></div>
            </div>
           <div class="purchase echart_box">
                    <div class="supply_title"> 采购产品发布量</div>
                    <div id="purchase_msg" class="echart_content"></div>
            </div>
             <div class="read echart_box">
                    <div class="supply_title"> 每日文章阅读总量</div>
                    <div id="read_msg" class="echart_content"></div>
            </div>
        </div>
        <div class="middle">
            <ul class="middle_list clearfix">
                <li>
                    <div class="trade_m"><img src="/asset/image/trade.png" alt=""></div>
                    <div class="trade_num">￥1,000,000</div>
                    <div class="trade_title">交易额</div>
                </li>
                <li>
                    <div class="register_img"><img src="/asset/image/register.png" alt=""></div>
                    <div class="register_num">1,000,000</div>
                    <div class="register_title">注册用户</div>
                </li>
            </ul>
            <div class="map" id="map"></div>
        </div>
        <div class="right">
            <div class="supply_ranking echart_box">
                <div class="supply_title"> 供应分类销量排名</div>
                <div id="ranking_msg" class="echart_content"></div>
            </div>
            <div class="trace_back echart_box">
                <div class="supply_title"> 追溯统计量</div>
                <div id="trace_msg" class="echart_content"></div>
            </div>
            <div class="read_box echart_box">
                <div class="supply_title">文章阅读量排名</div>
                <ul class="read_list">
                    <li>
                        <span class="index"></span>
                        <span class="read_title">文章名称</span>
                        <span class="reading">阅读量</span>
                    </li>
                    <li>
                        <span class="index index1">1</span>
                        <span class="article_title">一片教程教你如何养猪口感更好</span>
                        <span class="reading_num">51,653</span>
                    </li>
                    <li>
                        <span class="index index2">2</span>
                        <span class="article_title">一片教程教你如何养猪口感更好</span>
                        <span class="reading_num">50,555</span>
                    </li>
                    <li>
                        <span class="index index3">3</span>
                        <span class="article_title">一片教程教你如何养猪口感更好</span>
                        <span class="reading_num">50,555</span>
                    </li>
                    <li>
                        <span class="index index4">4</span>
                        <span class="article_title">一片教程教你如何养猪口感更好</span>
                        <span class="reading_num">50,555</span>
                    </li>
                    <li>
                        <span class="index index5">4</span>
                        <span class="article_title">一片教程教你如何养猪口感更好</span>
                        <span class="reading_num">50,555</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script src="/static/js/jquery-1.11.2.min-1.js"></script>
    <script src="/static/js/echart.min.js"></script>
    <!-- <script src="/static/js/lankao.js"></script> -->
    <!-- <script src="/static/js/china.js"></script> -->
    <script>
        let width = document.documentElement.clientWidth || document.body.clientWidth;
        let htmlDom = document.getElementsByTagName('html')[0]
        htmlDom.style.fontSize = width/100+'px'
        var myChart = echarts.init(document.getElementById('supply_msg'));//供应产品发布量
        myChart.setOption({
            xAxis: {
                type: 'category',
                scale: true,
                boundaryGap: false,
                axisLine: {
                   lineStyle: {
                       color: '#435A6B'
                   }
               },
                axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#A6CDFF'
                            }
                        },
                data: ['12-01', '12-02', '12-03', '12-04', '12-05']
            },
            yAxis: {
                type: 'value',
                scale: true,
                splitLine:{
                    show: true,
                    lineStyle:{
                        color: ['#435A6B'],
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#A6CDFF'
                    }
                },
            },
            grid: {
                left: '3%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            series: [{
                data: [2400, 932, 70, 934, 1290],
                type: 'line',   
                symbol: 'circle',
                symbolSize: 10,            
                markPoint: {
                    data: [ {value: 2400, xAxis: 0, yAxis: 2400},
                            {value: 932, xAxis: 1, yAxis: 932},
                            {value: 70, xAxis: 2, yAxis: 70},
                            {value: 934, xAxis: 3, yAxis: 934},
                            {value: 1290, xAxis: 4, yAxis: 1290},
                            {value: 1300, xAxis: 5, yAxis: 1300}]
                },
                itemStyle: {
                    borderWidth: 3,
                    borderColor: '#333',
                    color: '#27CDFF'
               },
                areaStyle: {
                    normal: {
                        color: 'linear-gradient(175deg,rgba(39,205,255,0.51) 0%,rgba(39,205,255,0) 100%)' //改变区域颜色
                    }
                },
                smooth: true
            }]
        })
        var myChart_pur = echarts.init(document.getElementById('purchase_msg'));//采购产品发布量
        myChart_pur.setOption({
            xAxis: {
                type: 'category',
                scale: true,
                boundaryGap: false,
                axisLine: {
                   lineStyle: {
                       color: '#435A6B'
                   }
               },
                axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#A6CDFF'
                            }
                        },
                data: ['12-01', '12-02', '12-03', '12-04', '12-05']
            },
            
            yAxis: {
                type: 'value',
                scale: true,
                splitLine:{
                    show: true,
                    lineStyle:{
                        color: ['#435A6B'],
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#A6CDFF'
                    }
                },
            },
            grid: {
                left: '3%',
                right: '10%',
                bottom: '8%',
                containLabel: true
            },
            series: [{
                data: [2400, 932, 70, 934, 1290],
                type: 'line',   
                symbol: 'circle',
                symbolSize: 10,  
                markPoint: {
                    data: [ {value: 2400, xAxis: 0, yAxis: 2400},
                            {value: 932, xAxis: 1, yAxis: 932},
                            {value: 70, xAxis: 2, yAxis: 70},
                            {value: 934, xAxis: 3, yAxis: 934},
                            {value: 1290, xAxis: 4, yAxis: 1290},
                            {value: 1300, xAxis: 5, yAxis: 1300}]
                },
                itemStyle: {
                    borderWidth: 3,
                    borderColor: '#202B33',
                    color: '#569C64'
               },
                areaStyle: {
                    normal: {
                        color: '#569C64' //改变区域颜色
                    } 
                },
                smooth: true
            }]
        })
        var myChart_read = echarts.init(document.getElementById('read_msg'));//每日文章阅读量
         myChart_read.setOption({
            xAxis: {
                type: 'category',
                scale: true,
                boundaryGap: false,
                axisLine: {
                   lineStyle: {
                       color: '#435A6B'
                   }
               },
                axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#A6CDFF'
                            }
                        },
                data: ['12-01', '12-02', '12-03', '12-04', '12-05']
            },
            yAxis: {
                type: 'value',
                scale: true,
                splitLine:{
                    show: true,
                    lineStyle:{
                        color: ['#435A6B'],
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#A6CDFF'
                    }
                },
            },
            grid: {
                left: '3%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            series: [{
                data: [2400, 932, 70, 934, 1290],
                type: 'line',   
                symbol: 'circle',
                symbolSize: 10,  
                markPoint: {
                    data: [ {value: 2400, xAxis: 0, yAxis: 2400},
                            {value: 932, xAxis: 1, yAxis: 932},
                            {value: 70, xAxis: 2, yAxis: 70},
                            {value: 934, xAxis: 3, yAxis: 934},
                            {value: 1290, xAxis: 4, yAxis: 1290},
                            {value: 1300, xAxis: 5, yAxis: 1300}]
                },
                itemStyle: {
                    borderWidth: 3,
                    borderColor: '#202B33',
                    color: '#2496A1'
               },
                areaStyle: {
                    normal: {
                        color: '#2496A1' //改变区域颜色
                    } 
                },
                smooth: true
            }]
        })
        var myChart_ranking = echarts.init(document.getElementById('ranking_msg'));//供应分类销量排名
        myChart_ranking.setOption({
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis:
                {
                    type: 'value',
                    axisTick: {
                        alignWithLabel: true
                    },
                    boundaryGap: false,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#A6CDFF'
                        }
                    },
                    splitLine:{
                        show: true,
                        lineStyle:{
                            color: ['#435A6B'],
                            width: 1,
                            type: 'solid'
                        }
                    }
                }
            ,
            yAxis: {
                    type: 'category',
                    data: ['肉类', '活禽', '活畜', '蛋类', '特种类', '饲料'],
                    axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#A6CDFF'
                            }
                        },
                    },
                axisLine: {
                        lineStyle: {
                        color: '#435A6B'
                    }
                  
               },
            series: [
                    {
                        name: '直接访问',
                        type: 'bar',
                        barWidth: '60%',
                        data: [10, 52, 200, 334, 390, 330, 220],
                        itemStyle:{
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#5BD6FF'
                            }, {
                                offset: 1,
                                color: '#3174FF'
                            }]),
                        }
                        },
                        symbol: 'emptydiamond',

                        barGap: '100%'
                        
                    }
                    
            ]
           
        })
        var myChart_trace = echarts.init(document.getElementById('trace_msg'));//追溯统计量
        myChart_trace.setOption({
            xAxis: {
                type: 'category',
                data: ['12-01', '12-02', '12-03', '12-04', '12-05'],
                axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#A6CDFF'
                        }
                }
                    
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#A6CDFF'
                            }
                },
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                itemStyle:{
                    normal:{
                        color:'#fc8a0f', //折点颜色
                        lineStyle:{
                            color:'#ff9c35' //折线颜色
                                }
                        }
                }
            }]
        })
        var chart_map = echarts.init(document.getElementById('map'));
            var chart = echarts.init(document.getElementById('map'));
            var geoCoordMap = {
                "堌阳镇":[114.96211700000003,34.95],
            };
            var chart = echarts.init(document.getElementById('map'));

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };
        $.getJSON('/static/js/lankao.json', function (chinaJson) {
            echarts.registerMap('lankao', chinaJson);
            chart.setOption({
                tooltip: {
                    trigger: 'item',
                        formatter: function (params) {
                            return params.name;
                        },
                        extraCssText:"height:20px;"
                },
                legend: {
                    orient: 'vertical',
                    top: 'bottom',
                    left: 'right',
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: {
                    map: 'lankao',
                    silent: true,

                    itemStyle: {
                        areaColor: '#3CCEFF',
                        borderColor: '#111'
                    }
                    ,
                    emphasis: {
                        itemStyle: {
                            // areaColor: '#2a333d'
                        },
                        label: {
                            show: false
                        }
                    }
                },
                series: [
                    {
                        name: '兰考',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData([
                            {name: "堌阳镇"},
                        
                        ]),
                        symbolSize: 30,
                        itemStyle: {
                            normal:{
                                color: '#C6AD13',
                                show:true,
                                shadowBlur: 10,
                                color: '#C6AD13',
                                shadowColor: '#258CF9',
                                    label:{
                                        show:true,
                                        distance: 50, 
                                        position: [30, 30],
                                        formatter: function(data) {
                                            var a =  data.name ;
                                            return a;
                                        },
                                        textStyle: {
                                            fontSize : 15,
                                            shadowBlur: 10,
                                            // color:'#C6AD13',
                                            shadowColor: '#258CF9'
                                        }
                                    }
                                },
                            emphasis: {
                                show:true,
                                borderColor: '#fff',
                                borderWidth: 1
                            }
                        }
                    },

                ],
            });
        });
    </script>
</body>
</html>